<style>
html {
    background-color: #F1F2F7;
}

    .wrapper {
        padding: 200px 0 140px 0;
    }

    .btn-item {
        text-align: center;
        margin-bottom: 60px;
    }

    .btn-item .layui-btn {
        margin-right: 60px;
    }

    .btn-item .layui-btn:last-child {
        margin-right: 0px;
    }

    @media screen and (max-width: 450px) {

        .btn-item .layui-btn {
            margin-right: 10px;
        }
    }
    
.icon-btn {
    padding: 0 10px;
}

.icon-btn {
    padding: 0 10px;
}


.btn-item {
    text-align: center;
    margin-top: 30px;
}

.nav-btn {
    position: static;
    display: inline-flex;
    padding: 0;
    background: none;
    vertical-align: inherit;
}

.nav-btn .layui-nav-item:nth-last-child(2) {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}
.nav-btn .layui-nav-item:first-child {
    border-left: none;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}
.nav-btn-lg .layui-nav-item {
    line-height: 44px;
}
.nav-btn .layui-nav-item {
    line-height: 38px;
    border-left: 1px solid rgba(255, 255, 255, .5);
    background-color: #009688;
}

.nav-btn-lg .layui-nav-child {
    top: 49px;
}
.nav-btn .layui-nav-child {
    top: 43px;
    padding: 2px 0;
}

</style>


<!-- 主体部分 -->
<div class="layui-body">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">分离式的下拉菜单</div>
                <div class="layui-card-body">
                    <!-- 下弹出 -->
                    <div class="btn-item">
                        <button data-dropdown="#dropdown1" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-triangle-d"></i>下左弹出
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="top-center" class="layui-btn icon-btn">
                            下中<i class="layui-icon layui-icon-triangle-d"></i>弹出
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="top-right" class="layui-btn icon-btn">
                            下右弹出<i class="layui-icon layui-icon-triangle-d"></i>
                        </button>
                    </div>
                    <!-- 上弹出 -->
                    <div class="btn-item">
                        <button data-dropdown="#dropdown1" data-anchor="bottom-left" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-triangle-d top"></i>上左弹出
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="bottom-center" class="layui-btn icon-btn">
                            上中<i class="layui-icon layui-icon-triangle-d top"></i>弹出
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="bottom-right" class="layui-btn icon-btn">
                            上右弹出<i class="layui-icon layui-icon-triangle-d top"></i>
                        </button>
                    </div>
                    <!-- 左弹出 -->
                    <div class="btn-item">
                        <button data-dropdown="#dropdown1" data-anchor="left-bottom" class="layui-btn icon-btn">
                            右下弹出<i class="layui-icon layui-icon-triangle-d right"></i>
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="right-center" class="layui-btn icon-btn">
                            左中弹出<i class="layui-icon layui-icon-triangle-d left"></i>
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="right-bottom" class="layui-btn icon-btn">
                            左下弹出<i class="layui-icon layui-icon-triangle-d left"></i>
                        </button>
                    </div>
                    <!-- 右弹出 -->
                    <div class="btn-item">
                        <button data-dropdown="#dropdown1" data-anchor="left-top" class="layui-btn icon-btn">
                            右上弹出<i class="layui-icon layui-icon-triangle-d right"></i>
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="left-center" class="layui-btn icon-btn">
                            右中弹出<i class="layui-icon layui-icon-triangle-d right"></i>
                        </button>
                        <button data-dropdown="#dropdown1" data-anchor="right-top" class="layui-btn icon-btn">
                            左上弹出<i class="layui-icon layui-icon-triangle-d left"></i>
                        </button>
                    </div>
                    <!-- 更多样式 -->
                    <div class="btn-item" style="margin-bottom: 30px;">
                        <button data-dropdown="#dropdown2" data-anchor="bottom-left" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-triangle-d top"></i>标题样式
                        </button>
                        <button data-dropdown="#dropdown3" data-anchor="bottom-center" class="layui-btn icon-btn">
                            夜间样式<i class="layui-icon layui-icon-triangle-d top"></i>
                        </button>
                        <button data-dropdown="#dropdown4" data-anchor="bottom-right" class="layui-btn icon-btn">
                            带遮罩层<i class="layui-icon layui-icon-triangle-d top"></i>
                        </button>
                    </div>

                    <!-- 下拉菜单 -->
                    <div class="dropdown-menu dropdown-anchor-left-top" id="dropdown1" style="top: 268px; left: 290.5px;"><div class="dropdown-anchor"></div>
                        <ul>
                            <li><a class="edit">修改</a></li>
                            <li><a class="del">删除</a></li>
                            <li><a class="print">打印</a></li>
                        </ul>
                    </div>
                    <!-- 下拉菜单(带标题的下拉菜单) -->
                    <div class="dropdown-menu dropdown-anchor-bottom-left" id="dropdown2" style="top: 191px; left: 200.5px;"><div class="dropdown-anchor"></div>
                        <ul>
                            <li class="title">请选择操作</li>
                            <li><a class="edit">修改</a></li>
                            <li><a class="del">删除</a></li>
                            <li><a class="print">打印</a></li>
                        </ul>
                    </div>
                    <!-- 下拉菜单(夜间模式) -->
                    <div class="dropdown-menu dark dropdown-anchor-bottom-center" id="dropdown3" style="top: 191px; left: 349.5px;"><div class="dropdown-anchor"></div>
                        <ul>
                            <li class="title">请选择操作</li>
                            <li><a class="edit">修改</a></li>
                            <li><a class="del">删除</a></li>
                            <li><a class="print">打印</a></li>
                        </ul>
                    </div>
                    <!-- 下拉菜单(带遮罩层) -->
                    <div class="dropdown-menu fixed dropdown-has-shade dropdown-anchor-top-right" id="dropdown4" style="top: 180px; left: 537.75px;"><div class="dropdown-anchor"></div>
                        <ul>
                            <li class="title">请选择操作</li>
                            <li><a class="edit">修改</a></li>
                            <li><a class="del">删除</a></li>
                            <li><a class="print">打印</a></li>
                        </ul>
                    </div>

                    

                </div>
            </div>
        </div>


    </div>

   
</div>


    <div class="wrapper">
        <div class="btn-item">
            <button data-dropdown="#dropdown1" data-anchor="bottom-left" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d top"></i>上拉菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="bottom-center" class="layui-btn icon-btn">
                上拉<i class="layui-icon layui-icon-triangle-d top"></i>菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="bottom-right" class="layui-btn icon-btn">
                上拉菜单<i class="layui-icon layui-icon-triangle-d top"></i>
            </button>
        </div>

        <div class="btn-item">

            <button data-dropdown="#dropdown1" data-anchor="left-center" class="layui-btn icon-btn">
                右拉菜单<i class="layui-icon layui-icon-triangle-d right"></i>
            </button>

            <button class="layui-btn" style="visibility: hidden; width: 93px;"></button>

            <button data-dropdown="#dropdown1" data-anchor="right-center" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d left"></i>左拉菜单
            </button>

        </div>

        <div class="btn-item">
            <button data-dropdown="#dropdown1" data-anchor="top-left" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d"></i>下拉菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="top-center" class="layui-btn icon-btn">
                下拉<i class="layui-icon layui-icon-triangle-d"></i>菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="top-right" class="layui-btn icon-btn">
                下拉菜单<i class="layui-icon layui-icon-triangle-d"></i>
            </button>
        </div>
    </div>

    <!-- 下拉菜单1 -->
    <div class="dropdown-menu dropdown-has-anchor dropdown-anchor-left-center" id="dropdown1" style="top: 304px; left: 729.5px;"><div class="dropdown-anchor"></div>
        <ul>
            <li><a class="edit">修改</a></li>
            <li class="divider"></li>
            <li><a class="del">删除</a></li>
            <li class="divider"></li>
            <li><a class="print">打印</a></li>
        </ul>
    </div>

</div>
<script>
layui.config({
	base: '__ADMIN__' //静态资源所在路径
}).extend({
	dropdown: '/lib/extend/dropdownMenu/dropdown',
}).use(['dropdown'],function(){
	var dropdown = layui.dropdown,
		$ = layui.$;
	
	$('.edit').click(function () {
        layer.msg('点击了修改');
    });

    $('.del').click(function () {
        layer.msg('点击了删除');
    });

    $('.print').click(function () {
        layer.msg('点击了打印');
    });
	
});

</script>